import { View, Text } from '@tarojs/components'
import React from 'react'
import './index.less'

export interface TimelineItemProps {
  /** 步骤编号 */
  step: string | number
  /** 标题 */
  title: string
  /** 持续时间 */
  duration?: string
  /** 描述 */
  description?: string
  /** 是否激活 */
  isActive?: boolean
  /** 是否完成 */
  isCompleted?: boolean
  /** 主题色 */
  color?: string
  /** 自定义类名 */
  className?: string
}

/**
 * TimelineItem 时间线项组件
 * 用于展示流程步骤、工期预计等时间线信息
 */
const TimelineItem: React.FC<TimelineItemProps> = ({
  step,
  title,
  duration,
  description,
  isActive = false,
  isCompleted = false,
  color = '#52c41a',
  className = '',
}) => {
  const stepClass = `timeline-item ${isActive ? 'active' : ''} ${isCompleted ? 'completed' : ''} ${className}`

  return (
    <View className={stepClass}>
      <View className='step-number' style={{ backgroundColor: isActive || isCompleted ? color : '#d9d9d9' }}>
        <Text>{step}</Text>
      </View>
      <View className='step-content'>
        <Text className='step-title'>{title}</Text>
        {duration && <Text className='step-duration'>预计 {duration}</Text>}
        {description && <Text className='step-description'>{description}</Text>}
      </View>
    </View>
  )
}

export default TimelineItem

